/*******************
 * 地图类配置
 ******************/
import { Tile as TileLayer, Image as ImageLayer, Vector as VectorLayer } from "ol/layer";
import { OSM, ImageWMS, Vector as VectorSource} from "ol/source";
import Overlay from 'ol/Overlay';

import {test} from './main.js';

const host = "localhost";
const port = 8082;

let config = {
  extent: [120.521896362305, 30.6132698059082, 120.571105957031, 30.6516819000244],
  center: [120.54470,30.62895]
};

/**
 * wms 要素图层
 */ 
let layers = {
  // 背景
  baseLayer: new TileLayer({
    extent: config.extent,
    source: new OSM()
  }),
  lineLayer: new ImageLayer({
    extent: config.extent,
    source: new ImageWMS({
      url: "http://" + host + ":" + port + "/geoserver/jinmen/wms",
      params: { LAYERS: "jinmen:Shortest Path Back" },
      ratio: 1,
      serverType: "geoserver"
    })
  }),
  shortestPathLayer: new ImageLayer({
    extent: config.extent,
    source: new ImageWMS({
      url: "http://" + host + ":" + port + "/geoserver/jinmen/wms",
      params: {
        LAYERS: "jinmen:Shortest Path",
        viewparams:
          "x1:120.53052;y1:30.637777;x2:120.55427;y2:30.62243"
      },
      ratio: 1,
      serverType: "geoserver"
    })
  }),
  // 矢量图层
  iconFeatureLayer: new VectorLayer({
    source: new VectorSource()
  })
};

/**
 * overlay配置
 */

 // 右键菜单
var contextMenu = document.createElement('div');
contextMenu.setAttribute('id','contextmenu_container');
contextMenu.classList.add("contextmenu");
var ul = document.createElement('ul');
var li1 = document.createElement('li');
li1.onclick = function(){
  test();
};
li1.innerHTML = "<i class='iconfont'>&#xea2b;</i>设为起点";
var li2 = document.createElement('li');
li2.onclick = 'test()';
li2.innerHTML = "<i class='iconfont'>&#xe64f;</i>设为途经点";
var li3 = document.createElement('li');
li3.onclick = 'test()';
li3.innerHTML = "<i class='iconfont'>&#xea2a;</i>设为终点";
ul.append(li1, li2, li3);
contextMenu.append(ul);

 // 初始化overlay
var overlay = new Overlay({
    element: contextMenu,
    positioning: 'top-left'
});


export { layers,overlay,config};
